@import url('../../base/base.min.css');
@function rem($size) {
    @return ($size/108)*1rem;
}

body {
    background-color: #5300CD;
}

.header {
    width: 100%;
    position: relative;
    img {
        width: 100%;
    }
    &-top {
        position: absolute;
        width: 100%;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: rem(119);
    }
    &::before {
        content: '';
        position: absolute;
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
        width: rem(1000);
        height: rem(423);
        background: url('../img/cheer.png')no-repeat center/100% 100%;
    }
}

.wrap {
    margin: 0 auto;
    width: rem(1002);
    margin-top: rem(10);
    &-zn {
        position: relative;
        width: 100%;
        height: rem(180);
        box-sizing: border-box;
        padding: rem(30) rem(60);
        background-color: #6B12FF;
        color: white;
        h3 {
            font-size: rem(26);
            line-height: rem(38);
        }
        p {
            font-size: rem(20);
            line-height: rem(34);
        }
        &::before {
            content: '';
            position: absolute;
            top: 0%;
            left: 50%;
            transform: translateX(-50%);
            width: rem(1000);
            height: rem(423);
            background: url('../img/cheer.png')no-repeat center/100% 100%;
        }
    }
    &-title1 {
        margin: rem(60) auto rem(10);
        width: rem(515);
        height: rem(80);
        background: url('../img/title-1.png')no-repeat center/100% 100%;
    }
    &-title2 {
        width: rem(390);
        height: rem(81);
        background-image: url('../img/title-2.png')
    }
    &-nav {
        width: 100%;
        height: rem(68);
        border-radius: rem(68);
        background-color: #6B12FF;
        color: white;
        margin: rem(30) 0;
        font-size: rem(26);
        display: flex;
        cursor: pointer;
        &-left,
        &-right {
            width: 50%;
            margin: 0 rem(40);
            text-align: center;
            line-height: rem(68);
            font-weight: bold;
            &.cur {
                background-color: white;
                color: #3C08DC;
                border-radius: rem(68);
                transform: scale(1.1);
            }
        }
    }
}

.container {
    width: 100%;
    .card {
        height: rem(452);
        width: 32.3%;
        margin: rem(10) rem(5) 0;
        background-color: #4201D1;
        display: flex;
        flex-direction: column;
        cursor: pointer;
        &-pic {
            width: 100%;
            height: 72%;
        }
        &-bar {
            flex: 1;
            width: 100%;
            box-sizing: border-box;
            padding: rem(10);
            font-size: rem(18);
            color: white;
            border: 1px solid #FFF;
            &-h {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical; // line-height: rem(26);
            }
            &-old {
                font-size: rem(16); // line-height: rem(38);
                padding-top: rem(14);
            }
            &-new {
                font-size: rem(18);
                i {
                    font-style: normal;
                    font-size: rem(28);
                    font-weight: bold;
                }
                span {
                    display: inline-block;
                    width: rem(100);
                    height: rem(26);
                    border-radius: rem(26);
                    background-color: #FCD424;
                    color: #692703;
                    text-align: center;
                    line-height: rem(26);
                    margin-top: rem(4);
                    font-size: rem(14);
                }
            }
        }
    }
}

footer {
    .back-top {
        width: rem(260);
        height: rem(66);
        border: 2px solid white;
        font-size: rem(30);
        font-weight: bold;
        margin: rem(70) auto;
        line-height: rem(66);
        color: white;
        text-align: center;
        border-radius: rem(66);
        cursor: pointer;
    }
}
/* 公有 左侧导航条 */
.left-Nav-fixed{
    display: none;
    width: 100px;
    background:#101720;
    z-index: 10000;
    left:0;
    top:8%;
    position: fixed;
    padding-bottom: 100px;
  }
  .parallel-main{
      height: 100px;
  }
  .left-Nav-fixed img{
    width: 100%;
  }
  .parallel-point{
    box-sizing: border-box;
    height: 80px;
    padding:0 6.8%;
    margin-bottom:16px;
  }
  .s-backtop img{width:40px;display: block;margin: 70px auto 0;cursor: pointer;}
  .block{display:block;width:100%;height:100%}
  /* 公有 左侧导航条 */

// 媒体查询
@media screen and (max-width: 810px) {
    // .header-top{
    //     height: rem();
    // }
    .wrap {
        width: 98%;
    }
    .container .card {
        width: 49%;
        height: rem(720);
        &-bar {
            font-size: rem(34);
            &-h {
                display: block;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            &-old {
                font-size: rem(30);
                line-height: rem(68);
            }
            &-new {
                font-size: rem(32);
                i {
                    font-size: rem(40);
                }
                span {
                    width: rem(170);
                    height: rem(46);
                    line-height: rem(46);
                    border-radius: rem(26);
                    margin-top: rem(4);
                    font-size: rem(26);
                }
            }
        }
    }
}

@media screen and (min-width:960px) {
    .header {
        img{
            display: none;
        }
        height: rem(190*4);
        background: url('../img/banner-pc_01.jpg')no-repeat center 0, url('../img/banner-pc_02.jpg')no-repeat center rem(190), url('../img/banner-pc_03.jpg')no-repeat center rem(190*2), url('../img/banner-pc_04.jpg')no-repeat center rem(190*3);
        &-top {
            height: rem(119);
            background: url('../img/top-pc.png')no-repeat center/cover;
        }
    }
    .left-Nav-fixed{
        display: block;
    }
}